<template>
  <div class="background-wall">
    <el-container>
      <el-header></el-header>
      <el-container>
        <el-aside width="200px">
           <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-aside>
        <el-main width="600px">
          <el-row>
            <el-col :span="10" class="bg" >账户名称:</el-col><el-col :span="14" class="bg" >{{this.count}}</el-col>
            <hr>
            <el-col :span="10" class="bg" >名字:</el-col><el-col :span="14" class="bg" >{{this.nick}}</el-col>
            <hr>
            <el-col :span="10" class="bg" >性别:</el-col><el-col :span="14" class="bg" >{{this.sex}}</el-col>
            <hr>
            <el-col :span="10" class="bg" >年龄:</el-col><el-col :span="14" class="bg" >{{this.age}}</el-col>
            <hr>
            <el-col :span="10" class="bg" >电话:</el-col><el-col :span="14" class="bg" >{{this.phone}}</el-col>
            <hr>
            <el-col :span="10" class="bg" >邮箱:</el-col><el-col :span="14" class="bg" >{{this.email}}</el-col>
            <hr>
            <el-col :span="10" class="bg" >身份证号 :</el-col><el-col :span="14" class="bg" >{{this.idcard}}</el-col>
            <hr>
            <!-- <el-form>
              <el-form-item label="性别">
                <el-select  placeholder="请选择性别" v-model="sex">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-form> -->
          </el-row>
        </el-main>
        <el-aside width="400px"></el-aside>
      </el-container> 
      <el-footer height="400px"></el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: '',
        count:'',
        nick:'',
        sex:'',
        age:'',
        phone:'',
        email:'',
        idcard:'',
        resource:'',
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // personcenter(form){
      //     this.$axios.post("/User/login",form).then((res)=>{
      //       let result = result.data.d;
      //           console.log (result.data.d)
      //     })
      // }
    },
    mounted(){   
      this.$axios.post("/User/loginUser",{"UID":this.$store.state.userInfo.UID}).then((res)=>{
        console.log(res.data.d.Count)
        this.count=res.data.d.Count;
        this.nick=res.data.d.Nick;
        this.sex=res.data.d.Sex;
        this.age=res.data.d.Age;
        this.phone=res.data.d.Phone;
        this.email=res.data.d.Email;
        this.idcard=res.data.d.IDCard;
      })  
     }
  }
</script>
<style scoped>
    .bg {
      height: 40px;
      line-height: 40px;
      text-align: left;
      font-family: "微软雅黑";
  }
  .bg-one {
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-family: 'Courier New', Courier, monospace;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px; 
    display: block;
  }
  
  .el-aside {
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #ffffff;
    color: #333;
    border-radius: 15px;
    /* text-align: left; */
  }
  .background-wall{
    background-color: #F2F6FC;
    line-height: 2000px;
  }
</style>
